<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 个人博客</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-100 flex flex-col min-h-screen">
    <div class="flex-grow container mx-auto px-4 py-8">
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden">
            <div class="py-4 px-6 bg-green-500 text-white text-center">
                <h1 class="text-2xl font-bold">注册</h1>
                <p class="text-sm">创建您的博客账户</p>
            </div>
            <div class="py-4 px-6">
                <form action="{{ url_for('register') }}" method="post">
                    <div class="mb-4">
                        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">邮箱</label>
                        <div class="flex">
                            <input type="email" id="email" name="email" class="shadow appearance-none border rounded-l w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                            <button type="button" id="send-code-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r focus:outline-none focus:shadow-outline">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="verification_code" class="block text-gray-700 text-sm font-bold mb-2">验证码</label>
                        <input type="text" id="verification_code" name="verification_code" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                    </div>
                    <div class="mb-4">
                        <label for="password" class="block text-gray-700 text-sm font-bold mb-2">密码</label>
                        <input type="password" id="password" name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                    </div>
                    <div class="mb-6">
                        <label for="confirm_password" class="block text-gray-700 text-sm font-bold mb-2">确认密码</label>
                        <input type="password" id="confirm_password" name="confirm_password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                    </div>
                    <div class="flex items-center justify-between">
                        <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                            注册
                        </button>
                        <a href="{{ url_for('login') }}" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
                            已有账户？登录
                        </a>
                    </div>
                </form>
            </div>
        </div>
        <div class="mt-4 text-center">
            <a href="{{ url_for('index') }}" class="text-blue-500 hover:text-blue-700">
                <i class="fas fa-arrow-left mr-1"></i> 返回首页
            </a>
        </div>
    </div>

    <footer class="mt-auto bg-white shadow-inner py-4">
        <div class="container mx-auto px-4 text-center text-gray-600">
            <p>&copy; {{ now.year }} 个人博客. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 闪现消息 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div id="flash-messages" class="fixed top-4 right-4 z-50">
                {% for category, message in messages %}
                    <div class="{{ 'bg-green-500' if category == 'success' else 'bg-red-500' }} text-white px-4 py-3 rounded mb-2 shadow-md flex items-center justify-between">
                        <span>{{ message }}</span>
                        <button type="button" class="close-flash ml-4" onclick="this.parentElement.style.display='none'">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                {% endfor %}
            </div>
            <script>
                // 5秒后自动隐藏闪现消息
                setTimeout(function() {
                    const flashMessages = document.getElementById('flash-messages');
                    if (flashMessages) {
                        flashMessages.style.display = 'none';
                    }
                }, 5000);
            </script>
        {% endif %}
    {% endwith %}

    <!-- 验证码发送脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sendCodeBtn = document.getElementById('send-code-btn');
            const emailInput = document.getElementById('email');
            let cooldown = false;
            let countdown = 60;
            
            sendCodeBtn.addEventListener('click', function() {
                if (cooldown) return;
                
                const email = emailInput.value.trim();
                if (!email) {
                    alert('请输入邮箱地址');
                    return;
                }
                
                // 验证邮箱格式
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('请输入有效的邮箱地址');
                    return;
                }
                
                // 发送验证码请求
                const formData = new FormData();
                formData.append('email', email);
                
                fetch('{{ url_for("send_verification_code") }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 开始倒计时
                        cooldown = true;
                        const originalText = sendCodeBtn.textContent;
                        
                        const timer = setInterval(() => {
                            sendCodeBtn.textContent = `${countdown}秒后重试`;
                            countdown--;
                            
                            if (countdown < 0) {
                                clearInterval(timer);
                                sendCodeBtn.textContent = originalText;
                                cooldown = false;
                                countdown = 60;
                            }
                        }, 1000);
                        
                        alert(data.message);
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('发送验证码失败，请稍后重试');
                });
            });
        });
    </script>
</body>
</html>